<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <script src="/static/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/static/font/iconfont.css">
    <title>模块打开次数</title>
    <style>
        .main {
            background: white;
            min-height: 490px;
            box-shadow: 1px 1px 2px #AAAAAA;
        }

        .layui-nav-bar {
            background-color: white !important;
        }
    </style>
</head>
<body style="margin: 15px;">
<p style="color: #E695C4">模块打开次数</p>
<hr>
<div class="layui-form">
    <div class="layui-form-item" style="background: white;padding: 20px">
        <label class="layui-form-label" style="width: 30px">建筑</label>
        <div class="layui-input-inline">
            <select name="type" lay-filter="type" id="bid">
                <option value="0">全部</option>
                <option value="10034">阿斯利康1期</option>
                <option value="10133">阿斯利康3期</option>
            </select>
        </div>
        <label class="layui-form-label" style="width: 30px">粒度</label>
        <div class="layui-input-inline">
            <select name="type" lay-filter="type" id="type">
                <option value="0">天</option>
                <option value="1">月</option>
            </select>
        </div>
        <label class="layui-form-label" style="width: 50px">时间段</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" id="time" placeholder=" - ">

        </div>
        <button class="layui-btn" style="background: #F7CBE2 ; margin-left: 20px" onclick="searchDB()">查询</button>
    </div>
    <a class="layui-form-item" target="_blank" id="export">
        <i class="iconfont icon-excel" style="color: #72B47C;margin: 5px"></i>导出
    </a>
</div>
<div id="main" class="main"></div>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="/static/layui/layui.js"></script>
<script>

  var $, ran, begin, end, laydate, myChart;
  layui.use('jquery', function () {
    $ = layui.jquery;
    $(function () {
      changeBox();
      myChart = echarts.init(document.getElementById('main'));
      myChart.setOption({
        backgroundColor: '#ffffff',
        title: {
          text: ''
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          data: []
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}次'
          }
        },
        series: [{
          name: '打开次数',
          type: 'line',
          data: []
        }]
      });
      searchDB();
      $('#time').val(ran);
    });
  });
  window.onresize = function () {
    changeBox();
  };

  function changeBox() {
    var height = document.documentElement.clientHeight * 0.8;
    var width = document.documentElement.clientWidth - 40;
    $('.main').height(height).width(width);
  }

  function searchDB() {
    var type = $('#type').val();
    var bid = $('#bid').val();
    var postData = {
      bid: bid,
      type: type,
      startDate: begin,
      endDate: end
    };
    $('#export').attr('href', '/module_employ/exportExcel?x-az-token='
      + localStorage.azToken + '&type=' + type + '&bid=' + bid +
      '&startDate=' + postData.startDate + '&endDate=' + postData.endDate);

    $.post('/module_employ/list?x-az-token='
      + localStorage.azToken, postData, function (data, status) {
      myChart.setOption({
        xAxis: {
          data: data.data.dates
        },
        series: [{
          name: '打开次数',
          data: data.data.count
        }]
      });
    })
  }

  function format(date, format) {
    console.log(date);
    var o = {
      "M+": date.getMonth() + 1, // month
      "d+": date.getDate(), // day
      "h+": date.getHours(), // hour
      "m+": date.getMinutes(), // minute
      "s+": date.getSeconds(), // second
      "q+": Math.floor((date.getMonth() + 3) / 3), // quarter
      "S": date.getMilliseconds()
      // millisecond
    };
    if (/(y+)/.test(format))
      format = format.replace(RegExp.$1, (date.getFullYear() + "")
        .substr(4 - RegExp.$1.length));
    for (var k in o)
      if (new RegExp("(" + k + ")").test(format))
        format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
          : ("00" + o[k]).substr(("" + o[k]).length));
    return format;
  }

  layui.use('laydate', function () {
    laydate = layui.laydate;
    begin = new Date();
    end = new Date();
    new Date(begin.setMonth((new Date().getMonth() - 1)));
    begin = format(begin, "yyyy-MM-dd");
    end = format(end, "yyyy-MM-dd");
    ran = begin + ' - ' + end;
    laydate.render({
      elem: '#time',
      format: 'yyyy-MM-dd'
      , value: ran
      , range: true,
      done: function (value, date, endDate) {
        begin = value.split(' - ')[0];
        end = value.split(' - ')[1];
      }
    });
  });
  layui.use('form', function () {
    var form = layui.form;
    form.render();
  });
</script>
</body>
</html>